<template>
  <div id="content">
    <mu-load-more
            id="load-more"
            @refresh="onRefresh"
            :refreshing="isRefreshing">
      <mu-list toggle-nested :nested-indent="false">
        <template v-for="(value, index) in message">
          <mu-list-item
                  v-if="value.hasOwnProperty('department')"
                  class="list-item"
                  button
                  nested
                  @toggle-nested="open = index"
                  :open="open === index"
                  :ripple="true"
                  :key="index"
                  :value="index">
            <mu-list-item-content class="list-item-content">
              <div class="title">{{ value.department + (value.doctor ? ' ' + value.doctor : '') }}</div>
              <div class="subtitle">{{ value.hospitalName }}</div>
              <div class="time">{{
                value.startTime[0] + '.' +
                value.startTime[1] + '.' +
                value.startTime[2] + ' — ' +
                value.stopTime[0] + '.' +
                value.stopTime[1] + '.' +
                value.stopTime[2]
                }}
              </div>
            </mu-list-item-content>

            <mu-list-item-action class="list-item-action">
              <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
            </mu-list-item-action>

            <mu-list-item class="nested-content" slot="nested">
              <mu-list-item-content>
                <div class="address">{{ value.hospitalAddress }}</div>
                <div class="telephone">{{ value.hospitalTel }}</div>
              </mu-list-item-content>
            </mu-list-item>
          </mu-list-item>

          <mu-list-item
                  v-if="value.hasOwnProperty('title')"
                  class="list-item"
                  button
                  nested
                  @toggle-nested="open = index"
                  :open="open === index"
                  :ripple="true"
                  :key="index"
                  :value="index">
            <mu-list-item-content class="list-item-content">
              <div class="title">{{ value.title }}</div>
              <div class="subtitle">{{ value.subtitle }}</div>
              <div class="time">{{
                value.startTime[0] + '.' +
                value.startTime[1] + '.' +
                value.startTime[2] + ' — ' +
                value.stopTime[0] + '.' +
                value.stopTime[1] + '.' +
                value.stopTime[2]
                }}
              </div>
            </mu-list-item-content>

            <mu-list-item-action class="list-item-action">
              <mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
            </mu-list-item-action>

            <mu-list-item class="nested-content" slot="nested">
              <mu-list-item-content>
                <div class="desc">{{ value.description }}</div>
              </mu-list-item-content>
            </mu-list-item>
          </mu-list-item>

          <mu-divider/>
        </template>

      </mu-list>
    </mu-load-more>
  </div>
</template>

<script lang="ts">
  export default {
    data() {
      return {
        isRefreshing: false,
        open: -1,
        message: [
          {
            phone: "13602804849",
            hospitalName: "射阳县第三人民医院射阳县精神病院",
            hospitalAddress: "射阳县合德镇北环路25号",
            hospitalTel: "0515-82322222",
            department: "内科",
            doctor: "扁鹊",
            startTime: [2018, 8, 8],
            stopTime: [2018, 8, 9]
          },
          {
            phone: "13602804849",
            hospitalName: "中山大学附属第三医院",
            hospitalAddress: "广州市天河区天河路600号石牌岗顶",
            hospitalTel: "020-85253333，咨询、免费预约挂号电话：85253016、85253203、85253272",
            department: "全科",
            doctor: "张家嘉",
            startTime: [2018, 8, 9],
            stopTime: [2018, 8, 10]
          },
          {
            title: "系统升级维护中",
            subtitle: "请稍后再进行操作……",
            description: "尊敬的用户：为了提高服务质量，目前我们正在对系统进行升级维护，升级期间所产生的问题请您不用担心，升级后我们将为用户提供更高质量的服务。",
            startTime: [2018, 8, 9],
            stopTime: [2018, 8, 10]
          }
        ]
      }
    },
    methods: {
      onRefresh() {
        this.isRefreshing = true;
        setTimeout(() => {
          this.isRefreshing = false;
        }, 500);
      }
    }
  }
</script>

<style scoped>
  #content {
    flex: 1 1 0 !important;
    width: 100%;
    overflow: auto;
  }

  .list-item {
    width: 100%;
    height: auto;
  }

  #load-more {
    width: 100%;
  }

  .list-item-content {
    padding: 8px 0;
  }

  .list-item-content div {
    line-height: 1.5;
  }

  .title {
    font-size: 16px;
    color: #212121;
  }

  .subtitle {
    font-size: 14px;
    color: #424242;
  }

  .address, .telephone, .desc {
    font-size: 14px;
    color: #616161;
  }

  .time {
    font-size: 12px;
    color: #616161;
    margin-top: 4px;
  }

  .list-item-action {
    min-width: unset;
  }

  .nested-content {
    background: #eeeeee;
    padding: 8px 0;
  }
</style>

<style>
  .list-item div {
    height: 100%;
  }
</style>